{% extends 'base.html' %}
{% load static %}

{% block title %}修改密码 - 自动化测试平台{% endblock %}

{% block extra_css %}
<style>
    .form-container {
        max-width: 500px;
        margin: 0 auto;
        background: var(--card-bg);
        border-radius: var(--radius-lg);
        border: 1px solid var(--border);
        box-shadow: var(--shadow-sm);
        padding: 2rem;
    }
    
    .form-title {
        font-size: 1.5rem;
        font-weight: 600;
        color: var(--text-primary);
        margin-bottom: 1.5rem;
        text-align: center;
    }
    
    .form-group {
        margin-bottom: 1.5rem;
    }
    
    .form-label {
        display: block;
        font-weight: 500;
        color: var(--text-primary);
        margin-bottom: 0.5rem;
    }
    
    .form-control {
        width: 100%;
        padding: 0.75rem;
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        background-color: var(--card-bg);
        color: var(--text-primary);
        font-size: 1rem;
        transition: border-color var(--transition-fast);
        box-sizing: border-box;
    }
    
    .form-control:focus {
        outline: none;
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.1);
    }
    
    .help-text {
        display: block;
        color: var(--text-tertiary);
        font-size: 0.875rem;
        margin-top: 0.25rem;
    }
    
    .button-group {
        margin-top: 2rem;
    }
    
    .btn-primary {
        background-color: var(--primary);
        color: white;
        border: none;
        padding: 0.75rem 1.5rem;
        border-radius: var(--radius-md);
        font-weight: 500;
        cursor: pointer;
        transition: background-color var(--transition-fast);
        width: 100%;
    }
    
    .btn-primary:hover {
        background-color: var(--primary-hover);
    }
    
    .btn-secondary {
        background-color: transparent;
        color: var(--text-secondary);
        border: 1px solid var(--border);
        padding: 0.75rem 1.5rem;
        border-radius: var(--radius-md);
        font-weight: 500;
        cursor: pointer;
        transition: all var(--transition-fast);
        margin-top: 1rem;
        width: 100%;
    }
    
    .btn-secondary:hover {
        background-color: var(--border-light);
        color: var(--text-primary);
    }
    
    .error-message {
        color: var(--danger);
        font-size: 0.875rem;
        margin-top: 0.25rem;
    }
    
    .form-error {
        border-color: var(--danger);
    }
    
    .form-error:focus {
        border-color: var(--danger);
        box-shadow: 0 0 0 3px rgba(245, 34, 45, 0.1);
    }
</style>
{% endblock %}

{% block content %}
<div class="form-container">
    <h2 class="form-title">修改密码</h2>
    
    {% if form.errors %}
        <div class="bg-danger/10 border border-danger/20 text-danger p-3 rounded-lg mb-4">
            <strong>修改密码失败，请检查以下错误：</strong>
            <ul class="mt-2">
                {% for field, errors in form.errors.items %}
                    {% for error in errors %}
                        <li>{{ error }}</li>
                    {% endfor %}
                {% endfor %}
            </ul>
        </div>
    {% endif %}
    
    <form method="post">
        {% csrf_token %}
        
        <div class="form-group">
            <label for="id_old_password" class="form-label">当前密码</label>
            <input 
                type="password" 
                id="id_old_password" 
                name="old_password" 
                class="form-control {% if form.old_password.errors %}form-error{% endif %}"
                required
            >
            {% if form.old_password.errors %}
                <div class="error-message">
                    {% for error in form.old_password.errors %}
                        {{ error }}
                    {% endfor %}
                </div>
            {% endif %}
        </div>
        
        <div class="form-group">
            <label for="id_new_password1" class="form-label">新密码</label>
            <input 
                type="password" 
                id="id_new_password1" 
                name="new_password1" 
                class="form-control {% if form.new_password1.errors %}form-error{% endif %}"
                required
            >
            {% if form.new_password1.errors %}
                <div class="error-message">
                    {% for error in form.new_password1.errors %}
                        {{ error }}
                    {% endfor %}
                </div>
            {% else %}
                <div class="help-text">
                    <p>密码必须满足以下要求：</p>
                    <ul style="margin: 0.5rem 0 0 1rem; padding-left: 0;">
                        <li>不能与您的个人信息过于相似</li>
                        <li>至少包含8个字符</li>
                        <li>不能是常见的密码</li>
                        <li>不能全是数字</li>
                    </ul>
                </div>
            {% endif %}
        </div>
        
        <div class="form-group">
            <label for="id_new_password2" class="form-label">确认新密码</label>
            <input 
                type="password" 
                id="id_new_password2" 
                name="new_password2" 
                class="form-control {% if form.new_password2.errors %}form-error{% endif %}"
                required
            >
            {% if form.new_password2.errors %}
                <div class="error-message">
                    {% for error in form.new_password2.errors %}
                        {{ error }}
                    {% endfor %}
                </div>
            {% else %}
                <div class="help-text">请再次输入新密码进行确认</div>
            {% endif %}
        </div>
        
        <div class="button-group">
            <button type="submit" class="btn-primary">修改密码</button>
            <a href="{% url 'accounts:profile' %}" class="btn-secondary">返回个人设置</a>
        </div>
    </form>
</div>
{% endblock %}

{% block extra_js %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 密码可见性切换功能
        const passwordFields = ['id_old_password', 'id_new_password1', 'id_new_password2'];
        
        passwordFields.forEach(fieldId => {
            const field = document.getElementById(fieldId);
            if (field) {
                const wrapper = document.createElement('div');
                wrapper.style.position = 'relative';
                wrapper.style.width = '100%';
                
                // 保存原来的父元素和下一个兄弟元素
                const parent = field.parentNode;
                const nextSibling = field.nextSibling;
                
                // 移动输入框到包装器
                parent.insertBefore(wrapper, field);
                wrapper.appendChild(field);
                
                // 创建切换按钮
                const toggleBtn = document.createElement('button');
                toggleBtn.type = 'button';
                toggleBtn.className = 'toggle-password';
                toggleBtn.style.position = 'absolute';
                toggleBtn.style.right = '8px';
                toggleBtn.style.top = '50%';
                toggleBtn.style.transform = 'translateY(-50%)';
                toggleBtn.style.background = 'none';
                toggleBtn.style.border = 'none';
                toggleBtn.style.cursor = 'pointer';
                toggleBtn.style.color = 'var(--text-tertiary)';
                toggleBtn.style.padding = '4px';
                toggleBtn.innerHTML = '<i class="far fa-eye"></i>';
                
                wrapper.appendChild(toggleBtn);
                
                // 添加点击事件
                toggleBtn.addEventListener('click', function() {
                    const type = field.getAttribute('type') === 'password' ? 'text' : 'password';
                    field.setAttribute('type', type);
                    
                    // 切换图标
                    toggleBtn.innerHTML = type === 'password' ? '<i class="far fa-eye"></i>' : '<i class="far fa-eye-slash"></i>';
                });
            }
        });
    });
</script>
{% endblock %}